<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/include/head.jsp"%>
<html>
<head>
    <title>全部订单</title>
    <link rel="stylesheet" type="text/css" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css" />
    <link type="text/css" rel="stylesheet" href="${rootPath}/static/css/AllOrder.css" />
    <script src="${rootPath}/static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}/static/js/mui.pullToRefresh.material.js"></script>
    <%--<script src="${rootPath}/static/js/paginationRequest.js"></script>--%>
</head>
<body>
<header class="mui-bar mui-bar-nav qy-bg-white">
    <a class="mui-icon mui-icon-back qy-text-black" href="/customer/center.do"></a>
    <h1 class="mui-title qy-text-black qy-font-size-20px">{{HeaderTitle}}</h1>
    <a id="menu" class="mui-action-menu mui-icon mui-icon-list mui-pull-right qy-text-black" href="#topPopover"></a>
</header>
<div class="mui-content">
    <div class="mui-slider mui-fullscreen" v-show="NowTab==0">
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
            <a class="mui-control-item mui-active" href="#package">
                <span class="mui-inline">全部<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#package1">
                <span class="mui-inline">待付款<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#package2">
                <span class="mui-inline">待预约<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#package3">
                <span class="mui-inline">待处理<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#package4">
                <span class="mui-inline">待体检<i class="active-line"></i></span>
            </a>
        </div>
        <div class="mui-slider-group">
            <div id="package" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in orders"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div v-if="order.shopState==0">
                                <div class="mui-row qy-padding-8 qy-bg-white qy-font-size-12px">
                                    <div class="mui-col-xs-6">{{order.shopName}}</div>
                                    <div class="mui-col-xs-6 qy-text-right qy-text-red">等待付款</div>
                                </div>
                                <div class="mui-row qy-padding-horizontal-8">
                                    <div class="mui-col-xs-12">
                                        <div class="swiper-container">
                                            <a class="swiper-wrapper" href="/customer/UnPaidDetail.do">
                                                <div style="width:auto;" class="swiper-slide" v-for="imgurl in order.products">
                                                    <img :src="imgurl.purl"  height="72px" width="100%" />
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white qy-border-bottom">
                                    <div class="mui-col-xs-12 font-size-12 qy-text-right">共{{order.products.length}}件商品，需付款&yen;{{order|prices}}</div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white">
                                    <div class="mui-col-xs-12 qy-text-right">
                                        <span class="mui-btn mui-btn-warning mui-btn-outlined font-size-16 qy-padding-vertical-19 qy-padding-horizontal-4">付款</span>
                                    </div>
                                </div>
                            </div>
                            <div v-else-if="order.shopState==11">
                                <div class="mui-row qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                    <span class="mui-col-xs-6 ">{{order.shopName}}</span>
                                    <span class="mui-col-xs-6 qy-text-right">预约时间<i class="qy-icon-downArrowSolid"></i></span>
                                </div>
                                <div v-for="product in order.products" class="mui-row qy-border-bottom qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px">
                                    <a class="mui-col-xs-3" href="/customer/UnSubscribeDetail.do">
                                        <img :src="product.purl" width="100%" height="72px" />
                                    </a>
                                    <div class="mui-col-xs-9 qy-padding-left-8">
                                        <div class="qy-font-size-22px">{{product.pName}}</div>
                                        <div class="qy-text-red">
                                            <span class="qy-font-size-12px">&yen;</span>
                                            <span class="qy-font-size-18px">{{product.pPrice}}</span>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between">
                                            <span class="qy-font-size-12px qy-text-label">{{product.pTime}}</span>
                                            <span class="mui-btn mui-btn-outlined qy-text-gray9 qy-padding-horizontal-4px qy-padding-vertical-12px">申请退款</span>
                                            <span @click="toggelInfo(order,product)" v-if="product.isShowInfo" class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">收起</span>
                                            <span @click="toggelInfo(order,product)" v-else class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">预约</span>
                                        </div>
                                    </div>
                                    <div v-show="product.isShowInfo" class="mui-col-xs-12">
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px qy-text-black">体检人姓名</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人真实姓名"/>
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px qy-text-black">体检人性别</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" readonly="readonly" value="男" />
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px qy-text-black">体检人联系电话</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" maxlength="11" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px"  placeholder="请输入有效联系电话"/>
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px qy-text-black">体检人年龄</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" maxlength="3" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人年龄"/>
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px-text-black">体检人身份证号</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" maxlength="18" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人身份证号"/>
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                            <div class="qy-flex qy-font-size-16px qy-text-black">体检人预约体检时间</div>
                                            <div class="qy-flex qy-flex-text-right">
                                                <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px qy-padding-vertical-4px" placeholder="选择体检时间"/>
                                                <small class="qy-icon-rightArrow"></small>
                                            </div>
                                        </div>
                                        <div class="qy-bg-white qy-padding-horizontal-4px qy-text-center">
                                            <input type="button" value="确认预约" class="qy-no-border qy-text-blue qy-font-size-21px"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="package1" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in orders" v-if="order.shopState==0"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div class="mui-row qy-padding-8 qy-bg-white qy-font-size-12px">
                                <div class="mui-col-xs-6">{{order.shopName}}</div>
                                <div class="mui-col-xs-6 qy-text-right qy-text-red">等待付款</div>
                            </div>
                            <div class="mui-row qy-padding-horizontal-8">
                                <div class="mui-col-xs-12">
                                    <div class="swiper-container">
                                        <a class="swiper-wrapper" href="/customer/UnPaidDetail.do">
                                            <div style="width:auto;" class="swiper-slide" v-for="imgurl in order.products">
                                                <img :src="imgurl.purl"  height="72px" width="100%" />
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="mui-row qy-padding-8 qy-bg-white qy-border-bottom">
                                <div class="mui-col-xs-12 font-size-12 qy-text-right">共{{order.products.length}}件商品，需付款&yen;{{order|prices}}</div>
                            </div>
                            <div class="mui-row qy-padding-8 qy-bg-white">
                                <div class="mui-col-xs-12 qy-text-right">
                                    <span class="mui-btn mui-btn-warning mui-btn-outlined font-size-16 qy-padding-vertical-19 qy-padding-horizontal-4">付款</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="package2" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in orders" v-if="order.shopState==11">
                            <div class="mui-row qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                <span class="mui-col-xs-6 ">{{order.shopName}}</span>
                                <span class="mui-col-xs-6 qy-text-right">预约时间<i class="qy-icon-downArrowSolid"></i></span>
                            </div>
                            <div v-for="product in order.products" class="mui-row qy-border-bottom qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px">
                                <div class="mui-col-xs-3">
                                    <img :src="product.purl" width="100%" height="72px" />
                                </div>
                                <div class="mui-col-xs-9 qy-padding-left-8">
                                    <div class="qy-font-size-22px">{{product.pName}}</div>
                                    <div class="qy-text-red">
                                        <span class="qy-font-size-12px">&yen;</span>
                                        <span class="qy-font-size-18px">{{product.pPrice}}</span>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between">
                                        <span class="qy-font-size-12px qy-text-label">{{product.pTime}}</span>
                                        <span @click="toggelInfo(order,product)" v-if="product.isShowInfo" class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">收起</span>
                                        <span @click="toggelInfo(order,product)" v-else class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">预约</span>
                                    </div>
                                </div>
                                <div v-show="product.isShowInfo" class="mui-col-xs-12">
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px qy-text-black">体检人姓名</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人真实姓名"/>
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px qy-text-black">体检人性别</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" readonly="readonly" value="男" />
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px qy-text-black">体检人联系电话</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" maxlength="11" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px"  placeholder="请输入有效联系电话"/>
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px qy-text-black">体检人年龄</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" maxlength="3" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人年龄"/>
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px-text-black">体检人身份证号</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" maxlength="18" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px" placeholder="请输入体检人身份证号"/>
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-flex qy-flex-text-between qy-flex-fullHeight qy-bg-white qy-padding-horizontal-4px qy-border-bottom">
                                        <div class="qy-flex qy-font-size-16px qy-text-black">体检人预约体检时间</div>
                                        <div class="qy-flex qy-flex-text-right">
                                            <input type="text" class="qy-text-right qy-text-black qy-no-margin qy-no-border qy-font-size-16px qy-padding-vertical-4px" placeholder="选择体检时间"/>
                                            <small class="qy-icon-rightArrow"></small>
                                        </div>
                                    </div>
                                    <div class="qy-bg-white qy-padding-horizontal-4px qy-text-center">
                                        <input type="button" value="确认预约" class="qy-no-border qy-text-blue qy-font-size-21px"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="package3" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in orders" v-if="order.shopState==13">
                            <div class="mui-row qy-bg-white qy-font-size-12px qy-text-label qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px">
                                <span class="mui-col-xs-6">{{order.shopName}}</span>
                                <span class="mui-col-xs-6 qy-text-right">预约时间<i class="qy-icon-downArrowSolid"></i></span>
                            </div>
                            <div v-for="product in order.products" class="mui-row qy-border-bottom qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px">
                                <div class="mui-col-xs-3">
                                    <img :src="product.pImg" width="100%" height="72px" />
                                </div>
                                <div class="mui-col-xs-9 qy-padding-left-8px">
                                    <div class="qy-font-size-21px qy-text-black">{{product.pName}}</div>
                                    <div class="qy-font-size-16px qy-margin-top-8px qy-text-black">预约时间：{{product.pTime}}</div>
                                    <div class="qy-text-right">
                                        <span class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">修改预约时间</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="package4" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in orders" v-if="order.shopState==3">
                            <div class="mui-row qy-bg-white qy-font-size-12px  qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px">
                                <span class="mui-col-xs-6 qy-text-label">{{order.shopName}}</span>
                                <span class="mui-col-xs-6 qy-text-right qy-text-red">请您准时前往体检</span>
                            </div>
                            <div v-for="product in order.products" class="mui-row qy-border-bottom qy-bg-white qy-padding-vertical-8px qy-padding-horizontal-4px">
                                <div class="mui-col-xs-3">
                                    <img :src="product.pImg" width="90px" height="72px" />
                                </div>
                                <div class="mui-col-xs-9 qy-padding-left-8">
                                    <div class="qy-font-size-21px">{{product.pName}}</div>
                                    <div class="qy-font-size-16px qy-margin-top-8px">预约时间：{{product.pTime}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mui-slider mui-fullscreen" v-show="NowTab==1">
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
            <a class="mui-control-item mui-active" href="#checkcard">
                <span class="mui-inline">全部<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#checkcard1">
                <span class="mui-inline">待付款<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#checkcard2">
                <span class="mui-inline">待预约<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#checkcard3">
                <span class="mui-inline">待处理<i class="active-line"></i></span>
            </a>
        </div>
        <div class="mui-slider-group">
            <div id="checkcard" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in checkCard"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div v-if="order.shopState==0">
                                <div class="mui-row qy-padding-8 qy-bg-white qy-font-size-12px">
                                    <div class="mui-col-xs-6">{{order.shopName}}</div>
                                    <div class="mui-col-xs-6 qy-text-right qy-text-red">等待付款</div>
                                </div>
                                <div class="mui-row qy-padding-horizontal-8">
                                    <div class="mui-col-xs-12">
                                        <div class="swiper-container">
                                            <a class="swiper-wrapper" href="/customer/UnPaidDetail.do">
                                                <div style="width:auto;" class="swiper-slide" v-for="imgurl in order.products">
                                                    <img :src="imgurl.purl"  height="72px" width="100%" />
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white qy-border-bottom">
                                    <div class="mui-col-xs-12 font-size-12 qy-text-right">共{{order.products.length}}件商品，需付款&yen;{{order|prices}}</div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white">
                                    <div class="mui-col-xs-12 qy-text-right">
                                        <span class="mui-btn mui-btn-warning mui-btn-outlined font-size-16 qy-padding-vertical-19 qy-padding-horizontal-4">付款</span>
                                    </div>
                                </div>
                            </div>
                            <div v-else-if="order.shopState==14" class="qy-bg-white">
                                <div class="mui-row qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                    <span class="mui-col-xs-6">{{order.shopName}}</span>
                                    <span class="mui-col-xs-6 qy-text-right qy-text-red">等待发货</span>
                                </div>
                                <div v-for="product in order.products" class="mui-row qy-border-bottom qy-padding-vertical-8px qy-padding-horizontal-4px">
                                    <div class="mui-col-xs-3">
                                        <img :src="product.pImg" width="100%" height="72px" />
                                    </div>
                                    <div class="mui-col-xs-9 qy-padding-left-8">
                                        <div class="qy-font-size-22px qy-flex qy-flex-text-between">
                                            <span>{{product.pName}}</span>
                                            <span class="qy-text-gray9 qy-font-size-12px">x{{product.pNum}}</span>
                                        </div>
                                        <div class="qy-text-gray9 qy-font-size-12px  qy-margin-top-8px">面额：{{product.pPrice}}</div>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-border-bottom qy-padding-horizontal-8px qy-padding-right-8px">
                                    共{{order.products.length}}件商品，实付款&yen;{{order | prices}}
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-padding-horizontal-8px qy-padding-right-8px">
                                    <span class="mui-btn qy-text-gray9 mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">再次购买</span>
                                </div>
                            </div>
                            <div v-else-if="order.shopState==15" class="qy-bg-white">
                                <div class="mui-row qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                    <span class="mui-col-xs-6">{{order.shopName}}</span>
                                    <span class="mui-col-xs-6 qy-text-right qy-text-red">等待收货</span>
                                </div>
                                <div v-for="product in order.products" class="mui-row qy-border-bottom qy-padding-vertical-8px qy-padding-horizontal-4px">
                                    <div class="mui-col-xs-3">
                                        <img :src="product.pImg" width="100%" height="72px" />
                                    </div>
                                    <div class="mui-col-xs-9 qy-padding-left-8">
                                        <div class="qy-font-size-22px qy-flex qy-flex-text-between">
                                            <span>{{product.pName}}</span>
                                            <span class="qy-text-gray9 qy-font-size-12px">x{{product.pNum}}</span>
                                        </div>
                                        <div class="qy-text-gray9 qy-font-size-12px  qy-margin-top-8px">面额：{{product.pPrice}}</div>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-border-bottom qy-padding-horizontal-8px qy-padding-right-8px">
                                    共{{order.products.length}}件商品，实付款&yen;{{order | prices}}
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-padding-horizontal-8px qy-padding-right-8px">
                                    <span class="mui-btn qy-text-gray9 mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">再次购买</span>
                                    <span class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">确认收货</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="checkcard1" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in checkCard"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div v-if="order.shopState==0">
                                <div class="mui-row qy-padding-8 qy-bg-white qy-font-size-12px">
                                    <div class="mui-col-xs-6">{{order.shopName}}</div>
                                    <div class="mui-col-xs-6 qy-text-right qy-text-red">等待付款</div>
                                </div>
                                <div class="mui-row qy-padding-horizontal-8">
                                    <div class="mui-col-xs-12">
                                        <div class="swiper-container">
                                            <a class="swiper-wrapper" href="/customer/UnPaidDetail.do">
                                                <div style="width:auto;" class="swiper-slide" v-for="imgurl in order.products">
                                                    <img :src="imgurl.purl"  height="72px" width="100%" />
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white qy-border-bottom">
                                    <div class="mui-col-xs-12 font-size-12 qy-text-right">共{{order.products.length}}件商品，需付款&yen;{{order|prices}}</div>
                                </div>
                                <div class="mui-row qy-padding-8 qy-bg-white">
                                    <div class="mui-col-xs-12 qy-text-right">
                                        <span class="mui-btn mui-btn-warning mui-btn-outlined font-size-16 qy-padding-vertical-19 qy-padding-horizontal-4">付款</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="checkcard2" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in checkCard"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div v-if="order.shopState==14" class="qy-bg-white">
                                <div class="mui-row qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                    <span class="mui-col-xs-6">{{order.shopName}}</span>
                                    <span class="mui-col-xs-6 qy-text-right qy-text-red">等待发货</span>
                                </div>
                                <div v-for="product in order.products" class="mui-row qy-border-bottom qy-padding-vertical-8px qy-padding-horizontal-4px">
                                    <div class="mui-col-xs-3">
                                        <img :src="product.pImg" width="100%" height="72px" />
                                    </div>
                                    <div class="mui-col-xs-9 qy-padding-left-8">
                                        <div class="qy-font-size-22px qy-flex qy-flex-text-between">
                                            <span>{{product.pName}}</span>
                                            <span class="qy-text-gray9 qy-font-size-12px">x{{product.pNum}}</span>
                                        </div>
                                        <div class="qy-text-gray9 qy-font-size-12px  qy-margin-top-8px">面额：{{product.pPrice}}</div>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-border-bottom qy-padding-horizontal-8px qy-padding-right-8px">
                                    共{{order.products.length}}件商品，实付款&yen;{{order | prices}}
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-padding-horizontal-8px qy-padding-right-8px">
                                    <span class="mui-btn qy-text-gray9 mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">再次购买</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="checkcard3" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div v-for="order in checkCard"  class="qy-margin-top-8px qy-text-black qy-block" >
                            <div v-if="order.shopState==15" class="qy-bg-white">
                                <div class="mui-row qy-padding-vertical-8px qy-padding-horizontal-4px qy-margin-top-8px qy-font-size-12px qy-text-label">
                                    <span class="mui-col-xs-6">{{order.shopName}}</span>
                                    <span class="mui-col-xs-6 qy-text-right qy-text-red">等待收货</span>
                                </div>
                                <div v-for="product in order.products" class="mui-row qy-border-bottom qy-padding-vertical-8px qy-padding-horizontal-4px">
                                    <div class="mui-col-xs-3">
                                        <img :src="product.pImg" width="100%" height="72px" />
                                    </div>
                                    <div class="mui-col-xs-9 qy-padding-left-8">
                                        <div class="qy-font-size-22px qy-flex qy-flex-text-between">
                                            <span>{{product.pName}}</span>
                                            <span class="qy-text-gray9 qy-font-size-12px">x{{product.pNum}}</span>
                                        </div>
                                        <div class="qy-text-gray9 qy-font-size-12px  qy-margin-top-8px">面额：{{product.pPrice}}</div>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-border-bottom qy-padding-horizontal-8px qy-padding-right-8px">
                                    共{{order.products.length}}件商品，实付款&yen;{{order | prices}}
                                </div>
                                <div class="mui-col-xs-12 qy-text-right qy-padding-horizontal-8px qy-padding-right-8px">
                                    <span class="mui-btn qy-text-gray9 mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">再次购买</span>
                                    <span class="mui-btn mui-btn-warning mui-btn-outlined qy-padding-horizontal-4px qy-padding-vertical-12px">确认收货</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="topPopover" class="mui-popover qy-padding-vertical-8px">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="qy-no-distance qy-no-liststyle qy-font-size-14px qy-text-black">
                <li class="qy-text-center qy-border-bottom qy-padding-bottom-4px" @click="toggle(item.content,item.type)" v-for="item in HeaderTitleList">{{item.content}}</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8" src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="${rootPath}/static/js/AllOrder.js"></script>